<!-- @format -->

<script setup lang="ts">
import TheIcon from '@/components/TheIcon.vue'
import TheCheck from '@/components/TheCheck.vue'
import theColors from './theColors.vue'
import { computed, effect, ref } from 'vue'
import { min } from '@/utils/commonUtils'
import { COLORS, COLORS_BG, DEF_FONT_SIZE } from './conf.ts'

const props = defineProps({
  conf: {
    type: Object,
  },
})
const emit = defineEmits(['change', 'remove'])

const show = defineModel('show')

const styl = computed(() => {
  const { color, fontSize, bgColor, bold, x, y } = props.conf || {}
  let size = fontSize || DEF_FONT_SIZE
  return {
    color,
    fontSize: size + 'rpx',
    height: size * 1.5 + 'rpx',
    'background-color': bgColor,
    'font-weight': bold ? 'bold' : 'normal',
  }
})

const onClose = () => {
  show.value = false
}

const onDelete = () => {
  show.value = false
  emit('remove', props.conf)
}

const changeConf = (value) => {
  emit('change', {
    ...props.conf,
    ...value,
  })
}
const inputChange = (e) => {
  const { value } = e.detail
  changeConf({
    content: value,
  })
}

const changeFontSize = (num) => {
  const { fontSize = DEF_FONT_SIZE } = props.conf
  let newSize = min(fontSize + num * 2, 24)

  changeConf({
    fontSize: newSize,
  })
}
</script>

<template>
  <wd-overlay :show="show">
    <div v-if="conf" class="c-x">
      <wd-navbar safeAreaInsetTop> </wd-navbar>
      <view class="input-x" @click="onClose">
        <!-- <the-icon
          class="the-btn-icon the-close"
          icon="close"
          @click="onClose"
        ></the-icon> -->
        <the-icon
          class="the-btn-icon the-delete"
          icon="delete"
          @click="onDelete"
        ></the-icon>

        <input
          :focus="show"
          class="the-input"
          :style="{ ...styl }"
          placeholder="请输入内容"
          :value="conf.content"
          @click.stop="1"
          @input="inputChange"
        />
      </view>
      <view class="workplace">
        <div class="f-x">
          <TheCheck
            :model-value="conf.bold"
            @update:modelValue="changeConf({ bold: $event })"
          >
            加粗
          </TheCheck>
          <div class="tip ml20 mh20">字号:</div>
          <wd-button
            type="icon"
            size="small"
            icon="add"
            @click="changeFontSize(1)"
          />
          <wd-button type="icon" icon="decrease" @click="changeFontSize(-1)" />
        </div>

        <div class="tip">文本颜色:</div>

        <the-colors
          :colors="COLORS"
          :current="conf.color || COLORS[0]"
          @change="changeConf({ color: $event })"
        ></the-colors>

        <div class="tip">背景颜色:</div>

        <the-colors
          :colors="COLORS_BG"
          :current="conf.bgColor || COLORS_BG[0]"
          @change="changeConf({ bgColor: $event })"
        ></the-colors>
      </view>
    </div>
  </wd-overlay>
</template>

<style lang="scss" scoped>
.c-x {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.input-x {
  position: relative;
  height: 80vw;
  overflow: hidden;
}

.the-btn-icon {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 50%;
  background-color: rgba($color: #fff, $alpha: 0.8);
}
// .the-close {
//   right: 20rpx;
//   top: 20rpx;
// }
.the-delete {
  right: 20rpx;
  top: 20rpx;
}
.input-wrapper {
  position: absolute;
  background-color: rgba($color: #fff, $alpha: 0.2);
  left: 0;

  border-radius: 8rpx;
}
.the-input {
  position: absolute;
  background-color: rgba($color: rgb(191, 239, 191), $alpha: 1);

  border: 1px solid white;
  padding: 8rpx 20rpx;

  left: 0;
  right: 0;
  bottom: 0;
}

.workplace {
  padding: 20rpx;
  background-color: white;
  flex: 1;
}

.f-x {
  display: flex;
  align-items: center;
  :deep(.wd-checkbox) {
    padding: 0;
  }
}

.tip {
  margin: 20rpx 0;
  margin-right: 30rpx;
  font-size: 28rpx;
  color: #999;
  padding-right: 8rpx;
}

.mh20 {
  margin: 20rpx 0;
}
.ml20 {
  margin-left: 20rpx;
}
</style>
